<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GoVector 向量数据库管理系统</title>
    <!-- Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- Element UI JS -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 定义全局变量 -->
    <script>
        // 定义全局对象，用于页面间共享数据
        window.appGlobal = {
            activeCollection: null,
            serverStatus: {
                online: false,
                model: '',
                memoryMode: false,
                collectionsEnabled: false
            },
            API_BASE_URL: '/api'
        };
    </script>
    <!-- API请求管理 -->
    <script src="js/api.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <h2>GoVector 向量数据库管理系统</h2>
                <div class="server-info">
                    <span>服务器状态: <i :class="{'el-icon-success': serverStatus.online, 'el-icon-error': !serverStatus.online}" :style="{color: serverStatus.online ? '#67C23A' : '#F56C6C'}"></i></span>
                    <span v-if="serverStatus.online">模型: {{ serverStatus.model }}</span>
                    <span v-if="activeCollection">当前集合: {{ activeCollection.name }}</span>
                </div>
            </el-header>

            <el-container>
                <el-aside width="250px">
                    <el-menu :default-active="activeMenu" class="el-menu-vertical" @select="handleMenuSelect">
                        <el-menu-item index="collections">
                            <i class="el-icon-folder"></i>
                            <span slot="title">集合管理</span>
                        </el-menu-item>
                        <el-menu-item index="documents">
                            <i class="el-icon-document"></i>
                            <span slot="title">文档管理</span>
                        </el-menu-item>
                        <el-menu-item index="search">
                            <i class="el-icon-search"></i>
                            <span slot="title">向量检索</span>
                        </el-menu-item>
                        <el-menu-item index="config">
                            <i class="el-icon-setting"></i>
                            <span slot="title">配置管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>

                <el-main>
                    <!-- 使用iframe替代组件 -->
                    <iframe v-if="activeMenu === 'collections'" 
                            src="pages/collection-manager.html" 
                            frameborder="0" 
                            class="content-iframe">
                    </iframe>

                    <iframe v-else-if="activeMenu === 'documents'" 
                            src="pages/document-manager.html" 
                            frameborder="0" 
                            class="content-iframe">
                    </iframe>

                    <iframe v-else-if="activeMenu === 'search'" 
                            src="pages/vector-search.html" 
                            frameborder="0" 
                            class="content-iframe">
                    </iframe>
                    
                    <iframe v-else-if="activeMenu === 'config'" 
                            src="pages/config-manager.html" 
                            frameborder="0" 
                            class="content-iframe">
                    </iframe>

                    <!-- 欢迎页面 -->
                    <div v-else class="welcome-page">
                        <h2>欢迎使用 GoVector 向量数据库管理系统</h2>
                        <p>请从左侧菜单选择功能开始使用</p>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 主应用脚本 -->
    <script src="js/app.js"></script>
</body>
</html>